<template>
  <div id="order_item">
    <div class="item">
      <div class="item_txt">订单状态:</div>
      <el-radio-group
        v-model="itemList.tabPosition"
        size="small"
        @change="setStatus"
      >
        <el-radio-button label="all">全部 {{ list1.all }}</el-radio-button>
        <el-radio-button label="unPaid"
          >未支付 {{ list1.unPaid }}</el-radio-button
        >
        <el-radio-button label="notShipped"
          >未发货 {{ list1.notShipped }}</el-radio-button
        >
        <el-radio-button label="spike">待收货{{ list1.spike }}</el-radio-button>
        <el-radio-button label="bargain"
          >待评价 {{ list1.bargain }}</el-radio-button
        >
        <el-radio-button label="complete"
          >交易完成 {{ list1.complete }}</el-radio-button
        >
        <el-radio-button label="toBeWrittenOff"
          >待核销 {{ list1.toBeWrittenOff }}</el-radio-button
        >
        <el-radio-button label="refunding"
          >退款中 {{ list1.refunding }}</el-radio-button
        >
        <el-radio-button label="refunded"
          >已退款 {{ list1.refunded }}</el-radio-button
        >
        <el-radio-button label="deleted"
          >已删除 {{ list1.deleted }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <div class="item">
      <div class="item_txt">时间选择:</div>
      <el-radio-group
        v-model="itemList.dateItem"
        size="small"
        @change="setDate"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="today">今天</el-radio-button>
        <el-radio-button label="yesterday">昨天</el-radio-button>
        <el-radio-button label="lately7">最近7天</el-radio-button>
        <el-radio-button label="lately30">最近30天</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="year">本年</el-radio-button>
      </el-radio-group>
      <div class="_date">
        <div class="block1">
          <el-date-picker
            v-model="itemList.value1"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="setDatedetail"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item_txt">订单号:</div>
      <div>
        <el-input
          placeholder="请输入内容"
          v-model="itemList.input2"
          size="small"
          click="ipt"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "order_item",
  props: {
    list1: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      itemList: {
        tabPosition: "all",
        value1: "",
        input2: "",
        dateItem: "",
      },
    };
  },
  computed: {
    data1() {
      return this.itemList.value1;
    },
  },
  watch: {
    data1: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
  methods: {
    setStatus(val) {
      this.itemList.tabPosition = val;
      this.$mitt.emit("send", this.itemList);
    },
    setDate(val) {
      this.itemList.dateItem = val;
      this.$mitt.emit("send", this.itemList);
    },
    //日期表
    setDatedetail(val) {
      console.log(val);
    },
  },
};
</script>

<style >
.item {
  display: flex;
  height: 32px;
  align-items: center;
  margin-bottom: 18px;
}
.item .item_txt {
  width: 100px;
  text-align: right;
  margin-right: 15px;
  font-weight: 600;
  font-size: 14px;
}
::v-deep .el-radio-button__inner {
  height: 32px;
  line-height: 5px;
}
._date {
  margin-left: 15px;
}
</style>